/* Global Styles */

@import url("//fonts.googleapis.com/css?family=Work+Sans:300,400,600");

html,body {
  background:#e9e9e9;
  color:#333;
  font-family:"Work Sans", sans-serif;
  line-height:1.4;
  height: 100%;
  width: 100%;
}

*,::before,::after {
  box-sizing:border-box;
}

:focus {
  outline:none;
}

.wrapper {
  margin:0 auto;
  padding:1rem 0;
  width:calc(100% - 5rem);
}


/* Progress Bar */

.progress {
  background:#31708f;
  height:10px;
  max-width:100%;
  position:absolute;
  top:0;
  transition:width 300ms ease;
  width:0;
}


/* Spinner */

@keyframes spin {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

.loading {
  animation:spin 1s infinite linear;
  border-radius:50%;
  border:.25rem solid rgba(255,255,255,.5);
  border-top-color:#31708f;
  height:30px;
  position:absolute;
  top:calc(1rem + 10px);
  width:30px;
}


/* Pagination */

.page {
font-size:0;
position:relative;
text-align:right;
top:5px;
}

.page a {
  color:#31708f;
  display:inline-block;
  font-size:2.025rem;
  text-decoration:none;
  transition:color 300ms ease;
}

.page a:hover {
  color:#333;
}

.page .prev {
  display:none;
}

.page .set {
  font-weight:600;
  margin:0 .5rem;
  pointer-events:none;
  position:relative;
  top:-1px;
}


/* Shop Styles */

.item-list {
  column-gap:1rem;
  margin:1rem 0 0;
  padding:0;
  opacity: 1;
  -webkit-transition: opacity 300ms ease;
  transition: opacity 300ms ease;
}

.item {
  background-color:#fff;
  border-radius:2px;
  box-shadow:2px 2px 4px 0 #d1d1d1;
  display:inline-block;
  margin:0 0 1rem;
  padding:1rem;
  position:relative;
  width:100%;
}

.item.hidden {
  visibility:hidden;
}

.item-image {
  background-color:#e9e9e9;
}

.item-image img {
  border-radius:2px;
  display:block;
  height:auto;
  transition:opacity 1200ms ease;
  width:100%;
}

.item-title {
  font-size:.85rem;
  margin:.5rem .25rem;
  word-wrap:break-word;
}

.item-price {
  color:#3c763d;
  display:inline-block;
  font-size:1.2rem;
  font-weight:600;
  margin:.5rem .25rem 0;
  line-height:1;
}

.item-quantity {
  border-radius:2px;
  bottom:1rem;
  color:#fff;
  font-size:.75rem;
  font-weight:600;
  padding:.25rem .5rem;
  position:absolute;
  right:1rem;
}


/* Quantity Level */

[class^="level-"] {
  color:#fff;
}

.level-low { background-color:#a94442; }
.level-medium { background-color:#8a6d3b; }
.level-high { background-color:#3c763d; }


/* Media Queries */

@media only screen and (min-width:480px) {
  .item-list {
    column-count:2;
  }
}

@media only screen and (min-width:700px) {
  .item-list {
    column-count:3;
  }
}

@media only screen and (min-width:900px) {
  .item-list {
    column-count:4;
  }
}

@media only screen and (min-width:1200px) {
  .item-list {
    column-count:5;
  }
}